iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列 第 7

第 7 集:你有 Flex Style 嗎?

  • 分享至 

  • xImage
  •  

此篇會簡單介紹 FlexBox,以及 flex container 的排列方向設置、對齊設置技巧。

FlexBox

Flexible Box Layout 簡稱為 FlexBox(彈性盒子),為了適應不同螢幕尺寸而誕生的佈局模式。

強調在於盒子內層的子元素,加入 橫向縱向 兩種方向概念,使其具有更加 彈性 的特點,透過這兩種方向的縮放特性,讓排版上不管是橫向對齊或縱向對齊都方便不少。

can i use Flexible Box Layout Module ?

從 2009 年問世到寫文章的當下 2021 年,flex box 在眾多排版方式的年代,瀏覽器支援度高達 99% 穩站霸主地位。

好比排版界的 聖母峰

Everest

Flexbox 是由外層容器(flex container)與內層子元素(flex items)所組合而成。

flexbox

內層子元素會依照外層容器 主軸交錯軸 所設置的,對齊方式、排列方式作為排版的準則。

優勢:

  • 相較 float 更加方便、彈性。
  • 大型框架 Bootstrap 也支援 flex 語法。

flex container

Flexbox 外層容器,設置內層子元素排列的方向以及對齊的方式。

分為兩個主要軸線(主軸、交錯軸),透過方向性(起點、終點)設置元素的排列方向。

軸線概念

屬性:

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

起手式

display:設置 flex 排版方式。(若沒有設置,後續大部分屬性都不會起作用)

  • flex:區塊元素
  • inline-flex(inline-block + flex):行內元素
  • ex:display: flex;

排列方向

內層子元素排列方向,依據 main axis(主軸)、cross axis(交錯軸)設置而定。

交錯軸 永遠和 主軸 垂直,所以只需要設置主軸就好。(也沒有語法可以設置 交錯軸 方向)

flex-direction

  • 設置主軸方向。(代表所有 flex item 排列方向)
  • 預設值 row:水平排列。
  • ex:flex-direction: row;

flex-wrap

  • 設置子元素超出外層容器時,是否換行。(若沒有設置寬高則不會有換行效果,因為預設會 滿版伸縮
  • 預設值 nowrap:不換行。
  • ex:flex-wrap: nowrap;

預設排列方向:水平排列、由左至右
軸線範例預設

flex-flow

  • flex-direction 與 flex-wrap 的縮寫。
  • ex:flex-flow: column-reverse nowrap;

排列方向:垂直排列、由下至上
軸線範例

對齊方式

在設置對齊時,可以想像有一條假想線,而元素都依照假想線來對齊。(下方圖片會掩飾主軸的假想線)

justify-content

  • 設置 主軸 的對齊方式。(會依照不同的設置來分配多餘的空白空間)
  • 預設值 flex-start:對齊 主軸 的起點。

align-items

  • 設置交錯軸的對齊方式。(會依照不同的設置來分配多餘的空白空間)
  • 預設值 flex-start:對齊 交錯軸 的起點。

預設對齊方式:主軸靠起點(左)、交錯軸靠起點對齊(上)。(假想線會貼齊元素上方)
預設對齊方式

align-content

  • 設置 交錯軸 多行的對齊方式。(會依照不同的設置來分配多餘的空白空間)

一張圖解釋 align-itemsalign-content 兩者都設置 center 的差異:

對齊方式:主軸靠起點(左)、交錯軸靠中間對齊。(假想線會貼齊元素中間)
align-items

align-content

align-items:

  • 每一列在每一等份中保持置中。

align-content:

  • 全部列在全部等份保持置中。

總結

優勢:

限制:

  • 排版設置只對 子元素 有效,孫元素 就沒效了。

flex item,使用上比較複雜,會在稍後的篇章做介紹。


上一篇
第 6 集:CSS 社交距離(下)
下一篇
第 8 集:Gird System 格線系統
系列文
30 天轉生到 bootstrap 5 的意識界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言